<!--侧边栏标题-->
<script setup lang="ts">
const appBarStyle = useAppBarStyle();
const items = [
        { title: 'Click Me' },
        { title: 'Click Me' },
        { title: 'Click Me' },
        { title: 'Click Me 2' },
      ]
      const barObj: Object = {
      product: {
        name: '产品',
        titles: ['支付', '增强功能', '数字化营销'],
        lists: [
          [
            {
              title: '线上收银台',
              src: '/product/pay/onlinePay'
            },
            {
              title: '扫码签约',
              src: '/product/pay/sign'
            },
            {
              title: '代扣',
              src: '/product/pay/withHolding'
            },
            {
              title: '订阅',
              src: '/product/pay/subscriber'
            },
            {
              title: '线下支付',
              src: '/product/pay/offlinePay'
            },
          ],
          [
            {
              title: '收入增长引擎',
              src: '/product/strengthen/engine'
            },
            {
              title: '合并支付',
              src: '/product/strengthen/merge'
            },
            {
              title: '收单分账',
              src: '/product/strengthen/splitting'
            },
          ],
          [
            {
              title: 'A+ Rewards',
              src: '/product/marketing/rewards'
            },
            {
              title: '支付营销',
              src: '/product/marketing/payMarketing'
            },
          ]
        ]
      },
      solition: {
        name: '解决方案',
        titles: [''],
        lists: [
          [{
              title: '电商平台',
              src: '/solution/platforms'
          }]
        ]
      },
      platform: {
        name: '资源',
        titles: [''],
        lists: [
          [
            // {
            //     title: '文档中心',
            //     // src: "/resource/docCenter",
            //     src: 'https://global.alipay.com/docs/'
            // },
            {
                title: '行业知识',
                src: '/resource/knowledge'
            },
            // {
            //     title: '常见问题',
            //     src: 'https://global.alipay.com/docs/ac/merchant_service/overview'
            //     // src: '/resource/problem'
            // },
            {
                title: '客户支持计划',
                src: '/resource/plan'
            },
          ]
        ]
      }
  }

</script>
<!--导航栏-->
<template>
  <div class="">
    
      <div class="text-center d-flex">
        <div v-for="(item, index) in Object.keys(barObj)" :key="index">
          <v-menu
            open-on-hover
          >
            <template v-slot:activator="{ props }">
              <v-btn
                color="primary"
                v-bind="props"
                size="large"
              >
                {{  barObj[item].name }}
              </v-btn>
            </template>
            <div class="overflow-hidden">
              <div class="triangle d-flex mt-10 shadow-[0_0_8px_0_rgba(0,0,0,0.2)]">
              <v-list class="pt-8 pb-8 first:rounded-tl-[12px] first:rounded-bl-[24px] last:rounded-tr-[12px] last:rounded-br-[48px]" v-for="(item_f2, index_f2) in barObj[item].lists" :key="index_f2" >
                <div class="pl-8 pr-8">
                  <div class="text-left pl-4 text-gray-400">{{ barObj[item]['titles'][index_f2] }}</div>
                  <v-list-item
                    v-for="(item_f3, index_f3) in item_f2"
                    :key="index_f3"
                  >
                  <NuxtLink :to="item_f3.src" v-if="item_f3.src.indexOf('http') == -1">
                    <v-list-item-title class="list-item d-flex align-center cursor-pointer">
                        <span class="hover:underline hover:text-blue-500 font-semibold">{{ item_f3.title }}</span>
                        <i class="fa-solid fa-angle-right text-[14px] text-neutral-300 ml-2"></i>
                    </v-list-item-title>
                  </NuxtLink>
                  <a v-else :href="item_f3.src" target="_blank">
                    <v-list-item-title class="list-item d-flex align-center cursor-pointer">
                        <span class="hover:underline hover:text-blue-500 font-semibold">{{ item_f3.title }}</span>
                        <i class="fa-solid fa-angle-right text-[14px] text-neutral-300 ml-2"></i>
                    </v-list-item-title>
                  </a>

                  </v-list-item>
                </div>

              </v-list>
            </div>
            </div>


          </v-menu>
        </div>
      </div>
  </div>

</template>

<style scoped>
/**
  * 指定页面时候，标题按钮固定颜色不变
  * 由default.global.ts全局路由守卫控制这两个样式
 */
.app-bar-div-select {
  @apply border-b-4 border-b-transparent border-b-[#786554];
}

/**
  * 正常效果
  * 由default.global.ts全局路由守卫控制这两个样式
 */
.app-bar-div {
  @apply border-b-4 border-b-transparent hover:border-b-[#786554] ;
}

.app-bar-btn {
  @apply text-base  text-[#413E3A]
}

.radio-input input {
  display: none;
}

.triangle {
  position: relative;
}
.triangle::after {
  content: "";
  position: absolute;
  top: -9px;
  left: 25px;
  width: 0;
  height: 0;
  border-radius: 4px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #fff; /* Triangle color */
}

.list-item:hover .fa-angle-right {
  @apply transform transition-transform duration-300 translate-x-1;
}

:deep(.v-list-item) {
  @apply w-[160px]
}
</style>